<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>产品分析--项目列表</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--extended-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
    <!--公用样式JS-->
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/pageoffice.js" id="po_js_main"></script>
</head>
<style>
    .Right {
        width: 100%;
        overflow-y: auto;
    }
	.widthle{
		width: 35%;
	}
	.widinput{
		width: 55%!important;
	}

</style>

<body>
<!--头部-->

<!--容器-->
<div class="container clearfix"   style="margin-left:3%;width:97%;">
    <!--右侧内容-->
    <div class="Right fr mt10">
        <div class="screening screeningOne whitebg clearfix">
            <ul class="clearfix fl" style="width: 100%;">

                <li style="width: 30%;">
                    <label class="fl" style="width: 20%;" >时间段:</label>
                    <input type="text"   style="border: 1px solid #DDDDDD;width: 30%;" name="startDate" id="startDate"
                           autocomplete="off" placeholder="开始时间">
                    至
                    <input type="text"  style="border: 1px solid #DDDDDD;width: 30%;" name="endDate" id="endDate"
                           autocomplete="off" placeholder="结束时间">
                </li>
                <li style="width: 25%;">
					<label class="fl widthle">产品名称:</label>
                    <div style="display: flow-root;width: 52%;" class=" h3 fl">
                        <div class="slt" id="cpName" ></div>
                    </div>
                </li>
                <li style="width: 20%;">
                    <label class="fl widthle">品牌:</label>
                    <input type="text"  class="widinput" style="border: 1px solid #DDDDDD" name="modelName" id="modelName"
                           autocomplete="off" placeholder="填写品牌">
                </li>
                <li style="width: 20%;">
                    <label class="fl widthle">规格型号:</label>
                    <input type="text"  class="widinput" style="border: 1px solid #DDDDDD" name="xhName" id="xhName"
                           autocomplete="off" placeholder="填写规格型号">
                </li>

            </ul>
            <ul class="clearfix fl" style="width: 100%;">
                <li style="width: 100%;">
                    <div class="fr mt10">
                        <button type="button" class="layui-btn layui-btn-normal" style="width:65px; height:40px" onclick="query()">筛选</button>
                        <button type="button" class="layui-btn layui-btn-normal" style="width:65px; height:40px;background-color: #FF5722;" onclick="resetQuery()">重置</button>
                    </div>
                </li>
            </ul>

        </div>

        <div class="project whitebg">

            <!--占位-->
            <div style=" height: 50px;margin-top: 10px;">
                <@shiro.hasPermission name="search:export">
                    <input class="layui-btn layui-btn-normal layui-btn-sm fr ml10" type="button" value="导出Excel" onclick="exportTable()">
                </@shiro.hasPermission>
                <@shiro.hasPermission name="search:view">
                    <input class="layui-btn layui-btn-danger layui-btn-sm fr" type="button" value="预览Excel" onclick="viewTable()">
                </@shiro.hasPermission>
            </div>
            <table id="tableList" class="layui-hide" lay-filter="tableList"></table>
        </div>
    </div>
</div>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<#-- 可以多选的下拉框 -->
<script src="${re.contextPath}/plugin/layui/xm-select.js"></script>


<!-- 公共配置第三方组件 -->
<script type="text/javascript">
    var str = "";
    layui.config({
        version: false,
        debug: false,
        base: "${re.contextPath}/plugin/layui/lay/extra/"
    })

</script>
<script type="text/javascript">
    var layer;
    var form = layui.form;
    var  autocomplete;
    var table = null;
    var tableIns = null;
    var  _xstjlcpselect;
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    var element = "";
    layui.use('element', function () {
        element = layui.element;


    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#beginDate' //指定元素
        });
        laydate.render({
            elem: '#endDate' //指定元素
        });
    });


    function query() {

        var cpName= _xstjlcpselect.getValue('valueStr');
        var modelName = $('#modelName').val()
        var xhName = $('#xhName').val()
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        var jsondata = {
            cpName:cpName,
            modelName:modelName,
            xhName:xhName,
            startDate: startDate,
            endDate: endDate
        };
       table.reload('tableList', {where: jsondata});
    }


    function resetQuery() {
        $('.clearfix .fl').find('input[type=text]').each(function() {
            $(this).val('');
        });
        // 品牌处理
        var newv = [];
        _xstjlcpselect.setValue(newv);
        var jsondata = {
            cpName:'',
            modelName:'',
            xhName:'',
            startDate: '',
            endDate: ''
        }
        table.reload('tableList', {where: jsondata});
    }


    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#startDate' //指定元素
        });
        laydate.render({
            elem: '#endDate' //指定元素
        });
    });

    layui.use(['table', 'layer', 'autocomplete'], function () {
        table = layui.table;
        element = element;
        //方法级渲染
        tableIns = table.render({
            id: 'tableList',
            elem: '#tableList',
            url: '/search/buProjectInfo/cpfxList',
            height: "auto",
            totalRow: true,
            page: true,
            cols: [[
                {
                    title: '序号', width: '100', totalRowText: '合计', templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
        {
            field: 'userId', title: '产品名称', width: '180', sort: true,hide:true
        },
                {
                    field: 'cpName', title: '产品名称', width: '300', sort: true
                },
                {
                    field: 'modelName', title: '品牌', width: '200', sort: true
                },
                {field: 'num', title: '数量', width: '180', sort: true,totalRow: true,templet:function (v) {
                        if(str == ""){
                            str = v.userId
                        }
                        return v.num
                    }},
                {field: 'ppzb', title: '品牌占比', width: '150', sort: false,templet:function (v) {
                    if(!v.ppzb){
                        return "0.00%";
                    }else{
                       return  v.ppzb;
                    }


                }},
                {field: 'proNum', title: '项目数量', width: '120', sort: true,totalRow: true},
                {field: 'jsNum', title: '建设单位数量', width: '180', sort: true,totalRow: true},
                {field: 'oper', title: '操作', width: '180', sort: true, templet: function (d) {

                        return '<span class="cursor" style="color: blue;" onclick="showDetail(\'' + d.cpName + '\',\'' + d.modelName + '\')">查看详情</span>';
                }},
            ]],
            done: function (res, currentCount) {
                var  totalvalue=$(".layui-table-total .laytable-cell-1-0-4").html();
                if(!totalvalue){
                    $(".layui-table-total .laytable-cell-1-0-4").html("0");
                }
                var  totalvaluebfb=$(".layui-table-total .laytable-cell-1-0-5").html();
                if(totalvaluebfb=="0%"){
                    $(".layui-table-total .laytable-cell-1-0-5").html("0.00%");
                }
                //***重点***：table渲染完成后渲染element进度条
                /*element.render();
                $(".layui-table-total .layui-table-cell").each(function (i,v) {
                    if($(i).length>0){
                        if(i==4){
                            $(v).html("100%")
                        }else{
                            var  totalvalue=$(v).html();
                            $(v).html(cutZero(totalvalue));
                        }
                    }
                });
                var  totalvalue=$(".layui-table-total .laytable-cell-1-0-3").html();
                $(".layui-table-main .laytable-cell-1-0-3").each(function (i,v) {
                         console.log(3333);
                         var jtvalue=$(v).html();
                         var per=((parseFloat(jtvalue)/parseFloat(totalvalue))*100).toFixed(2)+'%';
                         console.log(per);
                          $(v).parents("td").next().find(".layui-table-cell").html(per);
                });



                $(".layui-table-page select").css("width", "80px");*/
                //$(".layui-table-total .laytable-cell-1-0-4").html(str);
                //$(".layui-table-total .laytable-cell-1-0-5").html("100%");
            }
        });
        //监听工具条
        table.on('sort(tableList)', function (obj) {

            var  totalvalue=$(".layui-table-total .laytable-cell-1-0-3").html();
            $(".layui-table-main .laytable-cell-1-0-3").each(function (i,v) {
                var jtvalue=$(v).html();
                var per=((parseFloat(jtvalue)/parseFloat(totalvalue))*100).toFixed(2)+'%';
                $(v).parents("td").next().find(".layui-table-cell").html(per);
            });


        });

        initsl();

    });

    function initsl() {
        layerAjaxGet("/search/buProjectInfo/getCpName?",{},"",function (d){
            var rows=null;
            if(d.flag){
                if(d.data){
                    rows=d.data;
                }
                if(rows){
                    var _ycols = ['id', 'cpName'];
                    var _gpakgs=[];
                    $.each(rows,function (i,v){
                        _gpakgs.push({name:v[_ycols[1]],value:v[_ycols[1]]});
                    })
                    _xstjlcpselect = xmSelect.render({
                        el: '#cpName',
                        name:"cpName",
                        radio: true,
                        filterable: true,
                        //layVerify: 'required',
                        toolbar: {show: true},
                        layVerType: 'msg',
                        data: _gpakgs,
                        strict: true
                    });
                }
            }

        });
    }

    $(function () {
        //回车事件
        $(document).keydown(function(e){
            // 兼容FF和IE和Opera
            var theEvent = e || window.event;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                query();
            }
            return true;
        });
    })

    function showDetail(cpName, modelName) {
        console.log(cpName+""+modelName);
        var title = "";
        var w = "";
        var h = "";
        if (w == null || w == '') {
            w = ($(window).width()-200);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        var url = "/search/buProjectInfo/cpfxDetail?modelName="+modelName+"&cpName="+cpName;
        parent.layer.open({
            id: 'form-list',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url,
            success: function(layero){
                layero.find('.layui-layer-min').remove();
            }
        });

    }
    // 已开发票金额
    function ylfpje(id) {
        var projectId = id;
        var title = "";
        var w = "";
        var h = "";
        if (w == null || w == '') {
            w = ($(window).width()-200);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        var url = "/search/buProjectInfo/viewYKfP?projectId=" + projectId;
        parent.layer.open({
            id: 'form-list',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url,
            success: function(layero){
                layero.find('.layui-layer-min').remove();
            }
        });


    }

    function provinceChange(object) {
        var code = $(object).find('option:selected').val();
        if (code == "") {
            return;
        }
        layerAjaxGet('/sys/register/getOrganize', {"code": code}, '', function (d) {
            if (d.flag == true) {
                $(object).next().empty().append("<option value=''>选择市</option>");
                for (var i = 0; i < d.data.length; i++) {
                    $("#city").append("<option value='" + d.data[i].code + "'>" + d.data[i].name + "</option>");
                }
            } else {
                layer.msg(d.msg, {icon: 2});
            }
        });


    };

    function cityChange(object) {
        var code = $(object).find('option:selected').val();
        if (code == "") {
            return;
        }
        layerAjaxGet('/sys/register/getOrganize', {"code": code}, '', function (d) {
            if (d.flag == true) {
                $(object).next().empty().append("<option value=''>选择区县</option>");
                for (var i = 0; i < d.data.length; i++) {
                    $("#county").append("<option value='" + d.data[i].code + "'>" + d.data[i].name + "</option>");
                }
            } else {
                layer.msg(d.msg, {icon: 2});
            }
        });


    }

    //导出excel
    function exportTable(){
        var cpName= _xstjlcpselect.getValue('valueStr');
        var modelName = $('#modelName').val()
        var xhName = $('#xhName').val()
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        var url= '/search/buProjectInfo/exportTableCp?cpName='+cpName+'&modelName='+modelName+'&xhName='+xhName+'&startDate='+startDate+'&endDate='+endDate;
        location.href = url;
    }
    //预览excel
    function viewTable(){
        var cpName= _xstjlcpselect.getValue('valueStr');
        var modelName = $('#modelName').val()
        var xhName = $('#xhName').val()
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        var jsondata = {
            cpName:cpName,
            modelName:modelName,
            xhName:xhName,
            startDate: startDate,
            endDate: endDate
        };
        layerAjax('/search/buProjectInfo/viewTableCp', jsondata, '', function (d) {
            if(d.flag){
                if(d.data){
                    var w = ($(window).width()*0.8);
                    var h = ($(window).height()*0.8);
                    POBrowser.openWindowModeless('/sys/office/openwordTemp?ft=1&fid=' + d.data, 'width=1200px;height=800px;', '{}')
                }
            }else {
                layer.msg(d.msg, {icon: 2});
            }
            console.log(d);
        });
    }

</script>
</body>

</html>
